<template>
	<view class="container">
	
	<!-- 顶部导航 -->
	<uni-nav-bar dark :fixed="true" shadow background-color="#536CFC" status-bar title="消息"
		left-icon="staff"  right-icon="plusempty"
	 />
	
		<!-- 查询条件 -->
		<uni-search-bar class="news-top-query" radius="100" placeholder="搜索" clearButton="auto" cancelButton="none" @confirm="search" />
		
		<!-- 消息列表 -->
		<uni-list>
			<uni-list :border="true">
				<!-- 显示圆形头像 -->
				<uni-list-chat 
					v-for="item in 10"
					:avatar-circle="true" 
					title="运维、管理员、李大虎" 
					avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" 
					note="运维: 发起会话">
					<view style="display: flex;flex-direction: column;">
						<view style="width: 100%;color: #909399;font-size: 12rpx;">2024-12-01</view>
						<!-- 需要使用 uni-icons 请自行引入 -->
						<view style="width: 100%;color: #909399;text-align: right;font-size: 12rpx;margin-top: 20rpx;"><text class="iconfont icon-jingyin"></text></view>
					</view>
				</uni-list-chat>
			
			</uni-list>
		</uni-list>

		
	</view>
</template>

<script setup>

	import { ref, onMounted } from "vue";
	
	function search() {
		
	}

</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
	}
	.news-top {
		width: 100%;
		background-color: red;
	}
	.news-top-query {
		background-color: white;
	}
	.news-top-item {
		color: white;
		font-weight: 900;
	}
	.news-top-item-icon {
		padding: 0rpx 40rpx;
	}
	
	/deep/ .uni-page-head {
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

</style>
